<template>
  <div class="chat-app">
    <!-- 侧边导航栏 -->
    <aside :class="['sidebar', { 'sidebar-collapsed': sidebarCollapsed }]" ref="sidebar">
      <!-- 应用标题 -->
      <div class="sidebar-title-bar">
        <span class="sidebar-title">
          <i class="el-icon-message" style="margin-right: 5px;"></i>
          站内信
        </span>
        <el-button icon="el-icon-arrow-left" @click="toggleSidebar" circle class="sidebar-toggle-btn"
          v-show="isMobile" />
      </div>
      <!-- 搜索框 -->
      <div class="sidebar-search">
        <el-input v-model="search" placeholder="搜索对话..." size="small" clearable />
      </div>
      <!-- 导航菜单 -->
      <el-menu :default-active="activeMenu" class="sidebar-menu" :collapse="sidebarCollapsed"
        @select="handleMenuSelect">
        <el-menu-item index="message">
          <i class="el-icon-message"></i>
          <span slot="title">消息</span>
          <el-badge :value="unreadTotal" class="menu-badge" v-if="unreadTotal > 0" />
        </el-menu-item>
        <el-menu-item index="group">
          <i class="el-icon-user-solid"></i>
          <span slot="title">群组</span>
        </el-menu-item>
        <el-menu-item index="setting">
          <i class="el-icon-setting"></i>
          <span slot="title">设置</span>
        </el-menu-item>
      </el-menu>
      <!-- 联系人列表 -->
      <div class="sidebar-list">
        <div class="sidebar-list-title">最近联系人</div>
        <div class="sidebar-list-scroll">
          <template v-if="filteredContacts.length > 0">
            <div v-for="contact in filteredContacts" :key="contact.UserID"
              :class="['contact-item', { active: contact.UserID === currentContactId }]"
              @click="selectContact(contact.UserID)">
              <div class="avatar-wrap">
                <img :src="contact.AvatarURL" class="avatar" />
                <span class="status-dot" :class="contact.Status === 'online' ? 'online' : 'offline'"></span>
              </div>
              <div class="contact-info">
                <div class="contact-top">
                  <span class="contact-name">{{ contact.UserName }}
                  </span>
                  <span class="contact-time">{{ formatTime2(contact.LastOnlineTime) }}</span>
                </div>
                <div class="contact-bottom">
                  <span v-if="contact.lastMessageType === 'file'">
                    <i class="el-icon-document"></i>
                    {{ contact.lastMessage }}
                  </span>
                  <span v-else>{{ contact.lastMessage }}</span>
                </div>
              </div>
              <el-badge :value="contact.unread_count" class="contact-badge" v-if="contact.unread_count > 0" />
            </div>
          </template>
          <el-empty v-else description="登录后即可查看好友列表" :image="null"></el-empty>
        </div>
        <!-- 这里可以扩展 【群组】 -->
      </div>
      <!-- 用户信息 -->
      <div class="sidebar-account">
        <img v-if="isOnline" :src="userInfo.avatarUrl" class="avatar" />
        <img v-else src="@/assets/images/common/default.jpg" class="avatar" />
        <div class="account-info">
          <div class="account-name">{{ userInfo?.userName || '未登录用户' }}</div>
          <div class="account-status">
            <span :class="['status-dot', isOnline ? 'online' : 'offline']"></span>
            {{ isOnline ? '在线' : '离线' }}
          </div>
        </div>
        <el-button icon="el-icon-switch-button" type="text" @click="logout"></el-button>
      </div>
    </aside>
    <!-- 主聊天区域 -->
    <main class="chat-main">
      <!-- 顶部聊天信息栏 -->
      <header class="chat-header">
        <div class="chat-header-left">
          <el-button icon="el-icon-menu" @click="showSidebar" circle class="sidebar-show-btn" v-show="isMobile" />
          <div class="avatar-wrap">
            <img v-if="currentContactAvatar" :src="currentContactAvatar" class="avatar" />
            <img v-else src="@/assets/images/common/default.jpg" class="avatar" />
            <span class="status-dot" :class="currentContactStatus === 'online' ? 'online' : 'offline'"></span>
          </div>
          <div>
            <div class="chat-header-name">{{ currentContactName }}</div>
            <div class="chat-header-status">
              <span class="status-dot online"></span>
              {{ statusText }}
            </div>
          </div>
        </div>
        <div class="chat-header-actions">
          <el-button icon="el-icon-search" circle />
          <el-button icon="el-icon-phone" circle />
          <el-button icon="el-icon-video-camera" circle />
          <el-button icon="el-icon-more" circle />
        </div>
      </header>
      <!-- 聊天消息区域 -->
      <div class="chat-body" ref="chatBody">
        <div class="chat-date-divider">
          今天 14:25
        </div>
        <div v-for="msg in messages" :key="msg.messageId"
          :class="['chat-message', msg.senderId === userInfo.userId ? 'self' : 'other']">
          <img v-if="msg.senderId !== userInfo.userId" :src="currentContactAvatar" class="avatar msg-avatar" />
          <div class="msg-content-wrap">
            <div class="msg-meta" v-if="msg.senderId !== userInfo.userId">
              <span class="msg-name">{{ currentContactName }}</span>
              <span class="msg-time">{{ formatTime(msg.sendTime) }}</span>
            </div>
            <div v-if="msg.messageType === '文本'"
              :class="['msg-bubble', msg.senderId === userInfo.userId ? 'right' : 'left']">
              <span class="msg-text">{{ msg.content }}</span>
            </div>
            <div v-else-if="msg.messageType === '图片'"
              :class="['msg-bubble', msg.senderId === userInfo.userId ? 'right' : 'left']">
              <img :src="msg.attachment_url" class="msg-img" />
              <div class="msg-file-meta">
                <span>{{ msg.attachment_name }}</span>
              </div>
            </div>
            <div v-else-if="msg.messageType === '文件'"
              :class="['msg-bubble', msg.senderId === userInfo.userId ? 'right' : 'left']">
              <i class="el-icon-document"></i>
              <span>{{ msg.attachment_name }}</span>
            </div>
            <div v-else-if="msg.messageType === '语音'"
              :class="['msg-bubble', msg.senderId === userInfo.userId ? 'right' : 'left']">
              <i class="el-icon-microphone"></i>
              <span>语音消息</span>
            </div>
            <div class="msg-meta-bottom" v-if="msg.senderId === userInfo.userId">
              <span class="msg-time">{{ formatTime(msg.sendTime) }}</span>
              <i v-if="msg.readStatus === 'read'" class="el-icon-check"></i>
            </div>
          </div>
        </div>
        <!-- 对方正在输入 -->
        <div v-if="isTyping" class="chat-message other">
          <img :src="currentContactAvatar" class="avatar msg-avatar" />
          <div class="msg-content-wrap">
            <div class="msg-bubble left">
              <span class="typing-dot"></span>
              <span class="typing-dot"></span>
              <span class="typing-dot"></span>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部输入区域 -->
      <footer class="chat-footer">
        <div class="chat-footer-actions">
          <el-button circle>😊</el-button>
          <el-button circle>🔗</el-button>
          <div style="flex:1"></div>
          <el-button icon="el-icon-more" circle />
        </div>
        <div class="chat-footer-input">
          <el-input type="textarea" v-model="inputMessage" :autosize="{ minRows: 2, maxRows: 2, maxHeight: 100 }"
            placeholder="输入消息..." ref="input" @keydown.native="handleInputKeydown" class="msg-input" />
          <el-button icon="el-icon-position" type="primary" circle @click="sendMessage" class="send-btn" />
        </div>
      </footer>
    </main>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'ChatView',
  data() {
    return {
      sidebarCollapsed: false,  // 侧边栏是否折叠
      isMobile: false,// 是否为移动端
      search: '', // 搜索框内容
      activeMenu: 'message',// 当前激活的菜单项
      groups: [
        {
          group_id: '5',
          group_name: '产品开发组',
          group_avatar: 'https://design.gemcoder.com/staticResource/echoAiSystemImages/15bd703716eb575eb049d376ef18625e.png',
          last_message_time: '10:25',
          last_message_author: '赵工程师',
          last_message: '后端API已经准备好了'
        },
        {
          group_id: '6',
          group_name: '市场部',
          group_avatar: 'https://design.gemcoder.com/staticResource/echoAiSystemImages/2f7e3cc5e3e5a3d0e681096b58281846.png',
          last_message_time: '周五',
          last_message_author: '李营销',
          last_message: '新活动方案已更新'
        }
      ],// 群组列表
      currentContactId: '', // 当前选中的联系人或群组ID
      inputMessage: '',//输入框信息
      isTyping: false//是否正在输入
    };
  },
  computed: {
    isOnline() {
      return this.$store.getters['user/isLogin'];
    },
    // 当前联系人在线状态
    statusText() {
      return this.currentContact?.Status === 'online' ? '🟢 在线' : '🔴 离线';
    },
    //查询用户列表
    userList() {
      return this.$store.getters['message/getUserList'];
    },
    // 当前登录用户信息
    userInfo() {
      return this.$store.state.user.userInfo || {}
    },
    /**
   * 根据搜索内容筛选联系人
   */
    filteredContacts() {
      if (!this.search) return this.userList;
      return this.userList.filter(c => c.UserName.includes(this.search) || c.UserIntroduction.includes(this.search));
    },
    /**
   * 根据搜索内容筛选群组
   */
    filteredGroups() {
      if (!this.search) return this.groups;
      return this.groups.filter(g => g.group_name.includes(this.search) || g.last_message.includes(this.search));
    },
    /**
     * 当前选中的联系人或群组对象
     */
    currentContact() {
      return (
        this.userList.find(c => c.UserID === this.currentContactId) ||
        this.groups.find(g => g.group_id === this.currentContactId) ||
        {}
      );
    },
    /**
     * 当前联系人或群组名称
     */
    currentContactName() {
      return this.currentContact.UserName || this.currentContact.group_name || '';
    },

    /**
     * 当前联系人或群组头像
     */
    currentContactAvatar() {
      return this.currentContact.AvatarURL || this.currentContact.group_avatar || '';
    },
    /**
     * 当前联系人在线状态
     */
    currentContactStatus() {
      return this.currentContact.Status || '';
    },
    /**
     * 所有联系人未读消息总数
     */
    unreadTotal() {
      return this.userList.reduce((sum, c) => sum + (c.unread_count || 0), 0);
    },
    // 从Vuex Store 中获取聊天信息
    messages() {
      console.log('this.currentContactId===' + this.currentContactId)
      console.log("获取聊天信息：", this.$store.getters['message/getMessages'](this.currentContactId));
      return this.$store.getters['message/getMessages'](this.currentContactId);
    },
  },
  methods: {
    /**
     * 切换侧边栏折叠状态
     */
    toggleSidebar() {
      this.sidebarCollapsed = !this.sidebarCollapsed;
    },
    /**
      * 显示侧边栏（移动端）
      */
    showSidebar() {
      this.sidebarCollapsed = false;
    },
    /**
      * 菜单选择事件处理
      * @param {string} index 选中的菜单项索引
      */
    handleMenuSelect(index) {
      this.activeMenu = index;
    },
    /**
      * 选择联系人或群组
      * @param {string} id 联系人或群组ID
      */
    selectContact(id) {
      this.currentContactId = id;
      // TODO: 加载对应聊天记录
    },
    /**
     * 格式化时间显示
     * @param {string} time 时间字符串
     * @returns {string}
     */
    formatTime(time) {
      if (!time) return '';

      const m = moment(time);

      if (!m.isValid()) return '';  // 防止非法时间格式

      return m.format('YYYY-MM-DD HH:mm:ss');  // 返回完整时间格式
    },
    formatTime2(time) {
      if (!time) return '';

      const m = moment(time);

      if (!m.isValid()) return '';  // 防止非法时间格式

      return m.format('HH:mm:ss');  // 返回完整时间格式
    },
    /**
      * 输入框键盘事件处理（回车发送消息）
      * @param {KeyboardEvent} e
      */
    handleInputKeydown(e) {
      if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        this.sendMessage();
      }
    },
    /**
     * 发送消息
     */
    sendMessage() {
      if (!this.inputMessage.trim()) return;

      console.log('[Chat] 💬 发送消息:', this.inputMessage)

      const content = this.inputMessage.trim();

      const receiverId = this.currentContactId;

      const senderId = this.userInfo.userId;

      const messagePayload = {
        messageId: 'client-' + Date.now(), // 临时 ID，后续可服务端回填
        senderId: senderId,//发送用户：先写死
        reciverId: receiverId,
        content,
        targetType: 'user',
        messageType: '文本',
        sendTime: new Date().toISOString(),
        readStatus: 'sent'
      };

      this.$ws.send(
        {
          cmd: 100001,
          data: {
            messageId: 'client-' + Date.now(),
            senderId: senderId,
            reciverId: receiverId,
            content: content,
            targetType: 'user',
            messageType: '文本',
            sendTime: new Date().toISOString(),
            readStatus: 'sent'
          }
        }
      )

      // 2️⃣ 同步写入 Vuex 消息模块（注意封装性）
      // 向某个会话追加一条消息
      this.$store.commit('message/ADD_MESSAGE', {
        contactId: receiverId,
        message: messagePayload
      });

      // ✅ 重置指定会话未读消息数为 0（已读）
      this.$store.commit('message/RESET_UNREAD', receiverId);

      console.log('用户 【111】消息为：===')
      console.log(this.$store.getters['message/getMessages']("111"))

      console.log('用户 【222】消息为：===')
      console.log(this.$store.getters['message/getMessages']("222"))

      //情况输入框并滚动到底部
      this.inputMessage = '';
      // 滚动到底部
      this.$nextTick(() => {
        if (this.$refs.chatBody) {
          this.$refs.chatBody.scrollTop = this.$refs.chatBody.scrollHeight;
        }
      });
    },
    /**
     * 退出登录
     */
    logout() {
      // TODO: 退出登录逻辑


      this.$store.dispatch('user/logout');

      this.$message.success('已退出登录');
    },
    /**
 * 根据窗口大小判断是否为移动端
 */
    handleResize() {
      this.isMobile = true
      if (this.isMobile) {
        this.sidebarCollapsed = true;
      } else {
        this.sidebarCollapsed = false;
      }
    }
  },
  mounted() {
    /** 查询用户列表 */
    if (this.$ws) {
      this.$ws.send({
        cmd: 100003,
        data: {}
      });
    }

    // 初始化时判断是否为移动端，并监听窗口大小变化
    this.handleResize();
    window.addEventListener('resize', this.handleResize);
    // 聊天区域滚动到底部
    this.$nextTick(() => {
      if (this.$refs.chatBody) {
        this.$refs.chatBody.scrollTop = this.$refs.chatBody.scrollHeight;
      }
    });
  },
  beforeDestroy() {
    // 移除窗口大小变化监听
    window.removeEventListener('resize', this.handleResize);

  }
};
</script>

<style scoped>
/**
 * 用户在线状态样式
 */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
}

.status-dot.online {
  background-color: #4caf50;
  /* 绿色 */
}

.status-dot.offline {
  background-color: #f44336;
  /* 红色 */
}

/*  ==== */
.chat-app {
  display: flex;
  height: 83vh;
  background: #f1f2f6;
  font-family: 'Inter', 'Segoe UI', 'sans-serif';
  overflow: hidden;
}

.sidebar {
  width: 260px;
  min-width: 220px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  transition: width 0.3s;
  z-index: 10;
}

.sidebar-collapsed {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden;
}

.sidebar-title-bar {
  padding: 3px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-title {
  font-size: 20px;
  font-weight: bold;
  color: #6C5CE7;
  display: flex;
  align-items: center;
}

.sidebar-toggle-btn {
  margin-left: 8px;
}

.sidebar-search {
  padding: 12px 16px;
  border-bottom: 1px solid #e0e0e0;
}

.sidebar-search .el-input {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(108, 92, 231, 0.08);
  background: #fff;
  padding: 4px 8px;
  border: 1px solid #e0e0e0;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.sidebar-search .el-input .el-input__inner {
  border-radius: 12px;
  background: transparent;
  border: none !important;
  box-shadow: none !important;
  font-size: 15px;
  color: #333;
  padding: 8px 12px;
}

.sidebar-search .el-input .el-input__inner:focus {
  border: none;
  box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.15);
  outline: none;
}

.sidebar-menu {
  border: none;
  margin-bottom: 8px;
}

.menu-badge {
  float: right;
  margin-left: 8px;
}

.sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 8px;
}

.sidebar-list-title {
  font-size: 13px;
  font-weight: bold;
  color: #888;
  padding: 10px 16px 4px 16px;
  background: #fff;
}

.sidebar-list-scroll {
  height: 190px;
  overflow-y: auto;
  padding-bottom: 4px;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  border-radius: 6px;
  position: relative;
  transition: background 0.2s;
  margin-bottom: 2px;
}

.contact-item.active,
.contact-item:hover {
  background: #e6e6fa;
}

.avatar-wrap {
  position: relative;
  margin-right: 12px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.status-dot.online {
  background: #00B894;
}

.status-dot.offline {
  background: #BBBBBB;
}

.contact-info {
  flex: 1;
  min-width: 0;
}

.contact-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}

.contact-name {
  font-size: 15px;
  font-weight: 500;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-time {
  font-size: 12px;
  color: #999;
  margin-left: 8px;
  white-space: nowrap;
}

.contact-bottom {
  font-size: 13px;
  color: #666;
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-group-author {
  font-weight: 500;
  color: #333;
}

.contact-badge {
  position: absolute;
  right: 12px;
  top: 12px;
}

.sidebar-account {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid #e0e0e0;
  background: #fafafa;
}

.sidebar-account .avatar {
  margin-right: 10px;
}

.account-info {
  flex: 1;
  min-width: 0;
}

.account-name {
  font-size: 14px;
  font-weight: 500;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-status {
  font-size: 12px;
  color: #00B894;
  display: flex;
  align-items: center;
}

.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #f8f9fa;
  height: 85vh;
  overflow: hidden;
}

.chat-header {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  padding: 0px 0px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat-header-left {
  display: flex;
  align-items: center;
}

.sidebar-show-btn {
  margin-right: 8px;
}

.chat-header-name {
  font-size: 16px;
  font-weight: 500;
  color: #222;
}

.chat-header-status {
  font-size: 12px;
  color: #00B894;
  display: flex;
  align-items: center;
}

.chat-header-actions .el-button {
  margin-left: 8px;
  font-size: 20px;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}


.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 24px;
  background: #f8f9fa;
  position: relative;
}

.chat-date-divider {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.chat-date-divider span,
.chat-date-divider {
  font-size: 12px;
  background: #e0e0e0;
  color: #666;
  padding: 3px 12px;
  border-radius: 12px;
}

.chat-message {
  display: flex;
  align-items: flex-end;
  margin-bottom: 16px;
}

.chat-message.other {
  flex-direction: row;
}

.chat-message.self {
  flex-direction: row-reverse;
}

.msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 8px;
}

.msg-content-wrap {
  max-width: 70%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.chat-message.self .msg-content-wrap {
  align-items: flex-end;
}

.msg-meta {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}

.msg-name {
  font-size: 13px;
  font-weight: 500;
  color: #555;
  margin-right: 8px;
}

.msg-time {
  font-size: 12px;
  color: #bbb;
}

.msg-bubble {
  padding: 12px 16px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  font-size: 15px;
  color: #222;
  margin-bottom: 2px;
  word-break: break-all;
  max-width: 100%;
}

.msg-bubble.left {
  border-radius: 18px 18px 18px 4px;
}

.msg-bubble.right {
  background: #6C5CE7;
  color: #fff;
  border-radius: 18px 18px 4px 18px;
}

.msg-img {
  max-width: 180px;
  border-radius: 8px;
  margin-bottom: 2px;
}

.msg-file-meta {
  font-size: 12px;
  color: #888;
  margin-top: 2px;
}

.msg-meta-bottom {
  display: flex;
  align-items: center;
  margin-top: 4px;
  font-size: 12px;
  color: #bbb;
}

.typing-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #bbb;
  border-radius: 50%;
  margin-right: 2px;
  animation: typingBounce 1s infinite;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBounce {

  0%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-6px);
  }
}

.chat-footer {
  background: #fff;
  border-top: 1px solid #e0e0e0;
  padding: 12px 18px;
  height: 135px;
}

.chat-footer-actions {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.chat-footer-actions .el-button {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.chat-footer-input {
  display: flex;
  align-items: flex-end;
}

/* LML */
.msg-input {
  border-radius: 12px;
  /* 圆角 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  /* 卡片阴影 */
  padding: 8px;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* 输入框聚焦时的效果 */
.msg-input .el-textarea__inner:focus {
  outline: none;
  border-color: #6c5ce7;
  /* 焦点边框色（匹配按钮色） */
  box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.2);
}

/* 内部 textarea 调整 */
.msg-input .el-textarea__inner {
  border: none !important;
  /* 去边框 */
  box-shadow: none !important;
  /* 去阴影 */
  outline: none !important;
  /* 去焦点高亮 */
  /* border: none; */
  /* box-shadow: none; */
  resize: none;
  font-size: 15px;
  color: #333;
  background-color: transparent;
  /* 继承外层背景 */
  padding: 10px 12px;
  border-radius: 12px;
}

.send-btn {
  margin-left: 10px;
  background-color: #6c5ce7;
  border-color: #6c5ce7;
  font-size: 20px;
  color: white;
  /* 设置 icon 颜色为白色 */
}

@media (max-width: 1024px) {
  .sidebar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 20;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  }

  .sidebar-collapsed {
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden;
  }
}

@media (max-width: 768px) {
  .chat-body {
    padding: 8px 4px;
  }

  .chat-footer {
    padding: 8px 4px;
  }

  .chat-header {
    padding: 8px 4px;
  }
}
</style>

<style>
/* 内部 textarea 调整 */
.msg-input .el-textarea__inner {
  border: none !important;
  /* 去边框 */
  box-shadow: none !important;
  /* 去阴影 */
  outline: none !important;
  /* 去焦点高亮 */
  /* border: none; */
  /* box-shadow: none; */
  resize: none;
  font-size: 15px;
  color: #333;
  background-color: transparent;
  /* 继承外层背景 */
  padding: 10px 12px;
  border-radius: 12px;
}

.sidebar-search .el-input .el-input__inner {
  border-radius: 12px;
  background: transparent;
  border: none !important;
  box-shadow: none !important;
  font-size: 15px;
  color: #333;
  padding: 8px 12px;
}

.sidebar-search .el-input__prefix {
  margin-right: 50px !important;
}
</style>